<template>
  <view class="eventConfig-wrapper h-100% bg-#F5F5F5">
    <wd-tabs v-model="currentTab">
      <block v-for="(categorytem, index) in categories" :key="index">
        <wd-tab :title="categorytem.name">
          <view class="bg-#F5F5F5 p-8px">
            <block v-for="(eventItem, index) in categorytem.events" :key="index">
              <EventCard
                :event="eventItem"
                :category="categorytem"
                :onChange="renderEvents"
              ></EventCard>
            </block>
          </view>
        </wd-tab>
      </block>
    </wd-tabs>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import categoryList from '../../mocks/categoryList'
import EventCard from './component/eventCard.vue'
import { getTournamentDetail } from '@/service/tournament'
import { Category, Tournament } from '@/championship'

const currentTab = ref(0)
const tournamentDetail = ref<Tournament>(null)
const categories = ref<Category[]>(null)
const options = ref<{ id: string }>(null)

onLoad(async (params: { id: string }) => {
  // console.log(options)
  // const { id } = options
  // const { data } = await getTournamentDetail(id)
  // tournamentDetail.value = data
  // categories.value = data.categories
  options.value = params
  renderEvents()
})
const renderEvents = async () => {
  const { id } = options.value
  const { data } = await getTournamentDetail(id)
  tournamentDetail.value = data
  categories.value = data.categories
}
</script>
